<template>
  <div class="login-container">
    <!-- 顶部导航功能栏 -->
   <van-nav-bar title="标题" class="page-nav">
      <!-- 左侧关闭图标 点击退回原路由（个人中心）-->
      <template #left>
          <van-icon name="cross" @click="$router.back()"/>
      </template>
   </van-nav-bar>
   <!-- 登录表单 -->
   <!-- 只要是表单就需要做表单的验证 -->
   <van-form @submit="onSubmit" ref="userForm">
        <van-field
            v-model="user.mobile"
            name="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="userFormRules.mobile"
        >
        <template #left-icon>
            <i class="iconfont icon-shouji"></i>
        </template>
        </van-field>
        <van-field
            v-model="user.code"
            type="text"
            name="code"
            label="验证码"
            placeholder="验证码"
            :rules="userFormRules.code"
        >
        <template #left-icon>
            <i class="iconfont icon-yanzhengma"></i>
        </template>
        <template #button>
          <!-- 倒计时组件 -->
          <van-count-down :time="time" format="ss s"  v-if="isCountDownShow" @finish='isCountDownShow = false'/>
            <van-button
              round
              native-type="button"
              size="small"
              type="default"
              class="send-sms-btn"
              @click="onSendSms"
              v-else
              >发送验证码
            </van-button>
        </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button block type="info" native-type="submit" class="submitBtn">提交</van-button>
        </div>
    </van-form>
    <div class="tips">
        <span>默认手机号：13911111111； 默认验证码：246810</span>
    </div>
  </div>
</template>

<script>
/*
  1. 在使用vant组件的全部引入方式后，可以在全局的template模板中，直接使用vant标签
  2. 当需要是要的vant的一些功能方法（js）时， 我们可以选择使用this.$方法名称(官方文档上显示的是大写方法，而使用$时需要首字母小写)
  3. 如果在使用this.$方法时，发现系统仍然报错，使用按需引入的方式去把方法引入到当前组件中（import { 需要使用的方法 } from 'vant'）
*/
import { loginAPI, getSmscodeAPI } from '../../api/index.js'
// import { Toast } from 'vant'
export default {
  name: 'LoginIndex',
  data () {
    return {
      //  在一个form表单中，或者想管理多个表单变量时，放到一个对象里
      user: {
        mobile: '',
        code: ''
      },
      userFormRules: {
        // 表单验证
        mobile: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式错误' }
        ],
        code: [
          { required: true, message: '验证码不能为空' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }
        ]
      },
      time: 5 * 1000, // 倒计时
      isCountDownShow: false // 倒计时的显示
    }
  },
  methods: {
    /*
    制作手机验证码请求
    1. 取消表单内部发送验证码按钮的提交表单事件，并绑定发送验证码请求的方法
    2. 当触发验证码事件时，需要切换到倒计时组件，来阻止重复的验证码请求
    3. 当倒计时结束后，通过@finish事件，将按钮重新展示
    4. 通过验证码接口来发送短信，当失败时对于错误信息的不同，做出不同的提示
  */
    // 发送验证
    async onSendSms () {
      //  1 给form设置ref来调用其内部的方法
      //  2. 调用validate方法来验证手机号格式
      //  3. 调用发送接口
      try {
        // 验证手机号
        await this.$refs.userForm.validate('mobile')
        // 验证成功，显示倒计时
        this.isCountDownShow = true
      } catch (error) {
        // 因为验证错误和请求错误的返回信息格式不同，所以就不能写在一个太容易里边
        // 当验证错误就return 阻断后续代码执行
        console.log(error)
        return
      }

      // 发送获取验证请求
      try {
        await getSmscodeAPI(this.user.mobile)
        this.$toast.success('发送成功')
      } catch (error) {
        if (error.response.status === 429) {
          this.$toast.fail('发送过于频繁了，请稍后再试')
        } else {
          this.$toast.fail('网络错误，请稍后再试')
        }
      }
    },
    // 登录功能
    async onSubmit () {
      // 点击登录后的提示文本
      this.$toast.loading({
        duration: 0, // 提示文本框持续事件，毫秒值，因为不知道请求什么时候回来，所以设置为0，表示一直持续，直到我们主动关闭
        message: '加载中...', // 提示文本
        forbidClick: true // 加载期间是否禁用背景点击功能
      })
      // toast加载框的关闭： .success .fail 可以主动关闭加载提示
      //  也可以使用Toast.clear() 来主动关闭加载框
      try {
        // 当用户主动触发了一次接口请求时，需要在接口放回数据之前禁止他进行下一次的请求操作
        /*
          1. 在访问就扣之前禁用下一次接口的调用
          2. 接口数据返回之后，表示上一次访问已完成，开放下一次接口调用
          // 解决方法： 按钮禁用 防抖 插件功能
          今天使用toast请提示框的加载功能实现禁用页其他点击事件
        */
        const res = await loginAPI({
          mobile: this.user.mobile,
          code: this.user.code
        })
        console.log('登录成功', res)
        this.$toast.success('登录成功')
        // 登录成功，将返回的token存入vuex
        // 通过this.$store.commit的方式调用mutations中定义的方法，将接口返回的token保存到状态管理器中
        this.$store.commit('setUser', res.data.data)
        // 登录成功，返回原路由地址，即个人中心
        this.$router.back()
      } catch (error) {
        //  通过if判断错误信息的类型，提示不同的信息
        if (error.response.status === 400) {
          console.log('手机号或者验证码错误')
          this.$toast.fail('手机号或者验证码错误')
        } else {
          console.log('网络错误，请稍后再试', error)
          this.$toast.fail('网络错误，请稍后再试')
        }
      }
    }
  }
}
</script>

<style lang='less' scoped>
/*
    场景： 如果css样式设置后在页面上不生效时
    1. 看一下控制台中设置的样式是否被划掉（被覆盖），如果覆盖了，考虑样式优先级
    2. 观察复合选择器是否书写正确
    3. 因为我们修改的时第三方组件的样式，可能会导致样式无法影响，可以使用 样式穿透 -/deep/ :deep(类名)
    4. 样式穿透 :deep(选择器名)只能用在组件内，不能用在全局样式
*/
// .van-nav-bar {
//     background-color: #3296fa;
//     :deep(.van-nav-bar__title) {
//         color: #fff
//     }
// }
.login-container {
    // 登录按钮
    .submitBtn {
        background-color: #6db4fb;
        border: none
    }
    // 字体图标
    .iconfont {
        font-size: 37px;
    }
    // 发送验证码按钮
    .send-sms-btn {
        height: 46px;
        background-color: #ededed;
        color: #666;
    }
    // 提示信息
    .tips {
        display: flex;
        justify-content: center;
        span {
            font-size: 12px;
            color: #ccc
        }
    }
    // 顶部左侧关闭图标
    .page-nav {
        .van-icon-cross {
          color: #fff;
        }
    }
}
</style>
